<!--子组件  根据所选省份联动的市/区县地图-->
<template>
    <div class="map" id="provinceMap" style="width: 100%;height: 500px"></div>
</template>
<script>
import axios from "axios";
import { MapprovincesText, Mapprovinces } from "./provinces.js";
export default {
    props: {
        params: {
            type: Object,
            default: () => (
                {}
            )
        }
    },

    data() {
        return {
            MapprovincesText,
            Mapprovinces
        }
    },
    methods: {
        // 省份点击后调用 传递 provinceInfo 参数
        getCity(params) {
            for (var i = 0; i < this.MapprovincesText.length; i++) {
                if (params.name == this.MapprovincesText[i]) {
                    //点击获取对应城市数据 
                    const name = this.Mapprovinces[i]
                    //JSON数据在下方 来源datav
                    let url = '/json/province/' + name + '.json';
                    axios.get(url).then(res => {
                        this.canvasProvinceMap(name, params.areaCode, res.data)
                    })
                    break;
                }
            }
        },
        //绘制
        canvasProvinceMap: function (name, areaCode, mapData) {
            let _this = this;
            const params = {
                queryRange: "province",
                queryValue: areaCode
            }
            axios.get('xxxxxx').then(res => {
                const regionMapData = mapData.features;
                let projectNumData = [];
                let effectScatterData = [];
                regionMapData.filter(pl => {
                    res.filter(al => {
                        if (al.areaCode == pl.properties.adcode) {
                            projectNumData.push({
                                name: pl.properties.name,
                                value: al.num,
                                areaCode: al.areaCode
                            })
                            effectScatterData.push({
                                areaCode: al.areaCode,
                                name: pl.properties.name,
                                // value: al.coordinate.split(','),
                                value: pl.properties.centroid,
                                num: al.num
                            })
                        }
                    })
                })
                const provinceChart = this.$echarts.init(document.getElementById('provinceMap'), null, { renderer: 'svg' });
                this.$echarts.registerMap(name, mapData);
                //移除点击事件
                provinceChart.off('click')
                // 绘制图表
                let option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: function (item) {
                            if (item.componentSubType == 'map' && item.value) {
                                return item.name + item.value
                            } else if (item.componentSubType == 'effectScatter' && item.data.num) {
                                return item.name + item.data.num
                            } else {
                                return item.name
                            }
                        },
                        show: true,
                        borderColor: '#fff',
                        padding: [4, 15],
                        textStyle: {
                            color: "#262F3F",
                            fontSize: 8
                        }
                    },
                    geo: {
                        type: 'map',
                        map: name,   //省份
                        selectedMode: false,
                        aspectScale: 0.75,
                        layoutCenter: ["50%", "50%"],
                        layoutSize: '100%',
                        roam: true, //是否平游或缩放
                        scaleLimit: { //滚轮缩放的极限控制
                            min: 1,
                            max: 30
                        },
                        label: {
                            show: true, //区域名称样式
                            color: '#262F3F',
                            fontSize: 8
                        },
                        itemStyle: { // 区域样式
                            normal: {
                                areaColor: '#EFF4F9',// 背景
                                borderColor: '#A1AFC6',
                                borderWidth: 1
                            },
                            emphasis: { // 区域hover样式
                                areaColor: 'pink',
                                label: {
                                    color: "#262F3F",
                                    fontSize: 8,
                                }
                            },
                        },
                        select: { // 选中样式
                            itemStyle: {
                                areaColor: '#BCDAFF'
                            }
                        },
                    },
                    visualMap: {
                        show: false,
                        min: 1,
                        inRange: {
                            color: ['#BCDAFF']
                        },
                    },
                    series: [
                        {
                            type: 'map',
                            mapType: name,
                            geoIndex: 0,
                            aspectScale: 0.75,
                            layoutCenter: ["50%", "50%"],
                            layoutSize: '100%',
                            data: projectNumData
                        },
                        // 区域散点图
                        {
                            type: 'effectScatter',
                            coordinateSystem: 'geo',
                            symbolSize: 3,
                            rippleEffect: { //点动画
                                color: '#0051D9',
                                period: 3,
                                scale: 3,
                                brushType: 'fill'
                            },
                            data: effectScatterData
                        }
                    ]
                };
                //散点点击事件
                provinceChart.on('click', function (params) {

                });
                provinceChart.clear();
                setTimeout(() => {
                    provinceChart.setOption(option);
                }, 300)
                window.addEventListener("resize", function () {
                    provinceChart.resize();
                });
            })
        },
    }
}
</script>
